<template>
  <div class="carousel">
    <div
      :style="scrollStyle"
      v-for="(item, index) in list"
      :key="index"
      @click="goweb(item.url)"
    >
      <img
        :src="item.image"
        class="img"
        :class="currentIndex == index + 1 ? 'selected' : 'unSelect'"
      />
    </div>
    
    <div v-if="list.length">
      <img
        class="img"
        :src="firstItem.image"
        :class="currentIndex == 1 ? 'selected' : 'unSelect'"
      />
    </div>
  
  </div>
</template>

<script>
let timer;
let transtionTimer;
export default {
  name: "banner",
  props: {
    list: Array,
  },
  data() {
    return {
      width: 1920,
      height: 770,
      //  width: 750,
      // height:660,
      currentIndex: 1,
      scrollStyle: { transform: "translateX(0px)" },
    };
  },
  mounted() {
    if (document.body.clientWidth <= 1200) {
      this.width = ((750 / 7.5) * (document.body.clientWidth / 100)).toFixed(2);

      this.height = ((660 / 7.5) * (document.body.clientWidth / 100)).toFixed(
        2
      );
    }

    this.begin();
  },
  computed: {
    firstItem() {
      return this.list[0];
    },
    number() {
      return this.list.length + 1;
    },
    sizeStyle() {
      return { width: this.width + "px", height: this.height + "px" };
    },
  },
  methods: {
    /**
     * 跳网页
     */
    goweb(url) {
      window.open(url);
    },
    begin() {
      timer = setInterval(() => {
        if (transtionTimer) {
          return;
        }
        this.scroll();
      }, 3000);
    },
    scroll() {
      let start = -(((this.currentIndex - 1) % this.number) * this.width);
      let end = -(this.currentIndex % this.number) * this.width;
      if (end == 0) {
        start = 0;
        end = -this.width;
      }
      this.move(start, end);
    },
    move(start, end) {
      let offset = this.width / 20;
      //定时器，实现平移效果
      transtionTimer = setInterval(() => {
        start = start - offset;
        if (start <= end) {
          clearInterval(transtionTimer);
          transtionTimer = null;
          start = end;
          if (this.currentIndex % this.number == 0) {
            this.currentIndex = 1;
          } else {
            this.currentIndex++;
            // 过渡效果：移动到最后一张图后（我们在最后加的第一张图片），把偏移量设置为0，自动切换成第一图
            if (this.currentIndex == this.number) {
              this.currentIndex = 1;
              start = 0;
            }
          }
        }
        this.scrollStyle = {
          transform: "translateX(" + start + "px)",
        };
      }, 20);
    },
    handleSwitch(index) {
      clearInterval(transtionTimer);
      transtionTimer = null;
      clearInterval(timer);
      timer = null;
      this.currentIndex = index + 1;

      this.scrollStyle = {
        transform: "translateX(" + -(index % this.number) * this.width + "px)",
        transition: "opacity 0.6s linear",
      };
      this.begin();
    },
  },
  unmounted() {
    clearInterval(timer);
    timer = null;
    clearInterval(transtionTimer);
    transtionTimer = null;
  },
};
</script>

<style  lang="scss" scoped>
.carousel {
  display: flex;
  overflow: hidden;
  position: relative;
  margin: 0;
}

.img {
  /* width: 100%;
  height: 100%; */
  width: 1920px;
  height: 770px;
}

/* 动画效果 */
.selected {
  cursor: pointer;
  opacity: 1;
  animation: myOpacity 0.6s;
}

.unSelect {
  cursor: pointer;
  opacity: 0.1;
}

@keyframes myOpacity {
  0% {
    opacity: 0.1;
  }

  25% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.5;
  }

  75% {
    opacity: 0.75;
  }

  100% {
    opacity: 1;
  }
}

.dotList {
  display: flex;
  position: absolute;

  right: 50%;
  bottom: 20px;
}

.dot {
  box-sizing: border-box;
  border: 1px solid #6791d3;
  width: 10px;
  height: 10px;
  margin: 0px 2px;
  background: #fff;
  border-radius: 5px;
  display: flex;
  cursor: pointer;
}

.dot-actived {
  box-sizing: border-box;
  margin: 0px 2px;
  border: 1px solid #6791d3;
  width: 10px;
  height: 10px;
  border-radius: 5px;

  background: #6791d3;
}

.title {
  height: 30px;
  background: rgba(213, 213, 230, 0.4);
  text-align: center;
  position: absolute;
  transform: translateY(-100%);
  color: #fff;
  display: flex;
  width: 100%;
  justify-content: center;
}
</style>


<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .img {
    width: fn.rpx(750);
    height: fn.rpx(660);
  }
}
</style>